import { defineComponent, onUnmounted, reactive } from "vue";
import Draw from "./draw";

// 声明类型
const PropsType = {
  tips: {
    type: Number,
    default: 50,
    require: true,
  },
  colorObj: {
    type: Object,
    default: () => ({
      textStyle: "#3fc0fb",
      series: {
        color: ["#00bcd44a", "transparent"],
        dataColor: {
          normal: "#03a9f4",
          shadowColor: "#97e2f5",
        },
      },
    }),
  },
} as const;

export default defineComponent({
  props: PropsType,

  components: {
    Draw,
  },
  setup() {
    let intervalInstance = null;
    const cdata = reactive({
      xData: ["今日抽蛋", "昨日抽蛋", "今日留窝", "昨日留窝"],
      seriesData: [
        { value: 10, name: "今日抽蛋" },
        { value: 5, name: "昨日抽蛋" },
        { value: 10, name: "今日留窝" },
        { value: 5, name: "昨日留窝" },
      ],
    });
    intervalInstance = setInterval(() => {
      const data = cdata.seriesData;
      // cdata.seriesData = data.map((e) => {
      //   return { value: e.value + 10, name: e.name };
      // });
    }, 1000);

    onUnmounted(() => {
      clearInterval(intervalInstance);
    });
    return () => {
      return (
        <div>
          <Draw cdata={cdata} />
        </div>
      );
    };
  },
});
